<template>
  <view :style="colorStyle" v-if="info.id">
    <view class="infobox1 cDD5C5C f32">
      当前订单已拆分成{{ info.orderLogisticsList.length }}个包裹
    </view>
    <view class="infobox2">
      <view
        class="list"
        v-for="(item, index, key) in info.orderLogisticsList"
        :key="key"
        @click="gourl(item)"
      >
        <view class="block1 flex aitems c1F1F1F f32 fontWeight">
          <!-- <image src="@/static/img45.png" class="info1" mode=""></image> -->
          <view class="info2"> {{ item.logisticsName }} </view>
          <view class="info2"> {{ item.logisticsNo }} </view>
          <image src="@/static/img15.png" class="info3" mode=""></image>
        </view>
        <view class="block2">
          <view
            class="goodslist flex"
            v-for="(items, indexs, keys) in item.detailList"
            :key="keys"
          >
            <image :src="items.goods.img" mode="aspectFill"></image>
            <view class="info1">
              <view class="tipbox1 flex aitems between">
                <view class="tip1 ellipsis1 c1F1F1F f28">
                  {{ items.goods.name }}
                </view>
                <view class="tip2 c858585 f24"> X{{ items.goodsNum }} </view>
              </view>
              <view class="tipbox2 c858585 f24">
                {{
                  items.goods.goodsSpec
                    .replace(/{/g, "")
                    .replace(/}/, "")
                    .replace(/"/g, "")
                }}
              </view>
              <view class="tipbox3 flex aitems between">
                <view class="tip1 c1F1F1F fontWeight">
                  <text class="f24">￥</text>
                  <text class="f32">{{ items.goods.goodsPrice }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="block3 c1F1F1F f28"> 共1件 </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  orderInfo,
  orderCancel,
  orderReceipt,
  config,
  dictbizlist,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { getToken, setStorage } from "../../utils/storage";
import colors from "@/mixins/color";
import { loading, msg, go, showModal } from "../../utils/wxAPI";
import { logisticsType, refundStatusEn, orderStatus } from "@/keys/keys";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      info: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    // if (getToken()) {
    // 	this.orderInfo()
    // }
  },
  async onShow() {
    if (getToken()) {
      this.orderInfo();
    }
  },
  methods: {
    async orderInfo() {
      loading();
      let { data } = await orderInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;

        this.info = info;
        console.log(this.info);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    gourl(item) {
      setStorage("wuliuInfo", item);
      // go(`/pages/order/logisticsDetail?id=${this.options.id}&ids=${item.id}`);
    },
  },
  onPullDownRefresh() {
    this.orderInfo();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 22rpx 30rpx;
  background: #fff;
}

.infobox2 {
  .list {
    padding: 32rpx 24rpx;
    background: #fff;
    border-radius: 28rpx;
    margin: 30rpx 30rpx 0;

    .block1 {
      .info1 {
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
      }

      .info2 {
        margin: 0 16rpx 0 0rpx;
      }

      .info3 {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .block2 {
      margin: 24rpx 0 0;
      .goodslist {
        margin: 0 0 24rpx 0;

        image {
          width: 152rpx;
          height: 152rpx;
          border-radius: 28rpx;
        }

        .info1 {
          width: calc(100% - 152rpx - 20rpx);
          margin-left: 20rpx;

          .tipbox1 {
            .tip1 {
              width: 400rpx;
            }

            .tip2 {
            }
          }

          .tipbox2 {
            margin: 16rpx 0 0;
          }

          .tipbox3 {
            margin: 21rpx 0 0;

            .tip1 {
            }

            .tip2 {
              border-radius: 40rpx;
              border: 1px solid #ccc;
              padding: 21rpx 34rpx;
            }
          }
        }
      }
    }
  }
}
</style>
